import { Menu, Typography, Descriptions, Col, Row } from 'antd';
import React from 'react';
import { Link, withRouter } from 'react-router-dom'
import Layout from '../../../components/layout'
import { OrderedListOutlined, ShoppingCartOutlined, UserOutlined } from '@ant-design/icons'
import stores from '../../../stores';

const { Title } = Typography

const Home = (props: any) => {
    // console.log('Home', props.location.pathname);

    const adminLink = () => (
        <>
            <Title level={5}>管理员链接</Title>
            <Menu>
                <Menu.Item key="0">
                    <ShoppingCartOutlined />
                    <Link to="/create/category">添加分类</Link>
                </Menu.Item>
                <Menu.Item key="1">
                    <UserOutlined />
                    <Link to="/create/product">添加产品</Link>
                </Menu.Item>
                <Menu.Item key="2">
                    <OrderedListOutlined />
                    <Link to="/admin/orders">订单列表</Link>
                </Menu.Item>
            </Menu>
        </>
    )
    const adminInfo = () => (
        <Descriptions title="管理员信息" bordered>
            <Descriptions.Item label="昵称" key="0">{stores.User.user.name}</Descriptions.Item>
            <Descriptions.Item label="邮件" key="1">{stores.User.user.email}</Descriptions.Item>
            <Descriptions.Item label="角色" key="2">{stores.User.user.role === 1 ? '管理员' : '会员'}</Descriptions.Item>
        </Descriptions>
    )
    return (
        <Layout title="管理员 Dashboard" subtitle="">
            <Row>
                <Col span="4">{adminLink()}</Col>
                <Col span="20">{adminInfo()}</Col>
            </Row>

        </Layout>
    )
}

export default withRouter(Home)
